<template>
  <!-- 电梯运行状态 -->
  <div class="chart-box2">
    <div class="chart-title w-100p">
      <a-row class="w-100p" type="flex" align="middle" justify="space-between">
        <a-col>电梯运行状态</a-col>
        <a-col style="color: #fff" v-if="showBuilding">
          <a-space>
            <CaretLeftOutlined
              class="icon"
              @click="handleBuildingChange('last')"
            />
            <span :style="{ color: primaryColor }">
              {{ currentBuilding.build_name }}
            </span>
            <CaretRightOutlined
              class="icon"
              @click="handleBuildingChange('next')"
            />
          </a-space>
        </a-col>
      </a-row>
    </div>
    <div class="chart-content">
      <div class="left">
        <div class="title">
          <div style="padding: 4px">客梯</div>
          <Decoration4
            :reverse="true"
            :dur="10"
            style="height: 5px; width: 100%"
          />
        </div>
        <div class="content">
          <ScrollTable
            :header="tableHeader"
            :showHeader="false"
            :list="showElevator"
          />
        </div>
      </div>
      <div class="right">
        <div class="title text-right">
          <div style="padding: 4px">货梯</div>
          <Decoration4
            :reverse="true"
            :dur="10"
            style="transform: rotate(180deg); height: 5px; width: 100%"
          />
        </div>
        <div class="content">
          <ScrollTable
            :header="tableHeader"
            :showHeader="false"
            :list="showLift"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRaw, toRefs, watch } from "vue";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import { Decoration4 } from "@kjgl77/datav-vue3";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";
import { CaretLeftOutlined, CaretRightOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "LiftStatus",
  components: {
    CountTo,
    Decoration4,
    ScrollTable,
    CaretLeftOutlined,
    CaretRightOutlined,
  },
  setup(props, context) {
    const state = reactive({
      ...common.theme,
      buildingList: [],
      showBuilding: false,
      currentBuilding: {},
      tableHeader: [
        { key: "name", title: "车牌号" },
        { key: "statusTxt", title: "时间" },
      ],
      elevator: [],
      lift: [],
    });

    watch(
      () => store.getters.centerControl.Device_elevatorWorkStatus,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const colorMap = {
      color0: common.theme.primaryYellow,
      "color-1": common.theme.primaryRed,
      color1: common.theme.lightGreen,
    };

    const showElevator = computed(() => {
      if (state.showBuilding) {
        return state.elevator.filter(
          (item) => item.build_id == state.currentBuilding.id
        );
      }
      return state.elevator;
    });

    const showLift = computed(() => {
      if (state.showBuilding) {
        return state.lift.filter(
          (item) => item.build_id == state.currentBuilding.id
        );
      }
      return state.lift;
    });

    const getData = () => {
      const { Device_elevatorWorkStatus } = store.getters.centerControl;
      if (Device_elevatorWorkStatus) {
        state.elevator = Device_elevatorWorkStatus.elevator.map((item) => {
          item.style = {
            name: {
              color: "#fff",
            },
            statusTxt: {
              color: colorMap[`color${item.status}`],
            },
          };
          return item;
        });
        state.lift = Device_elevatorWorkStatus.lift.map((item) => {
          item.style = {
            name: {
              color: "#fff",
            },
            statusTxt: {
              color: colorMap[`color${item.status}`],
            },
          };
          return item;
        });
        context.emit('onShow', Device_elevatorWorkStatus.show)
      }
    }

    const handleBuildingChange = (type) => {
      const index = state.buildingList.findIndex(
        (item) => item.id == state.currentBuilding.id
      );
      if (type == "last" && index == 0) {
        state.currentBuilding =
          state.buildingList[state.buildingList.length - 1];
      } else if (type == "next" && index == state.buildingList.length - 1) {
        state.currentBuilding = state.buildingList[0];
      } else {
        let nextIndex = type == "last" ? index - 1 : index + 1;
        state.currentBuilding = state.buildingList[nextIndex];
      }
    };

    const init = () => {
      store.dispatch("GetCurrentVillageAndBuild").then((res) => {
        const { currentVillage, currentBuilding } = res;
        if (currentBuilding.id) {
          state.showBuilding = false;
        } else {
          state.showBuilding = true;
          state.buildingList = currentVillage.buildList;
          state.currentBuilding = state.buildingList[0];
        }
        getData();
      });
    };

    init();

    return {
      showElevator,
      showLift,
      ...toRefs(state),
      handleBuildingChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
@chartHeight: 10rem;
.icon {
  cursor: pointer;
  padding: 0 0.4rem;
}
.chart-content {
  display: flex;
  height: 100%;
  .left,
  .right {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .title {
      padding: 0 1rem;
    }
    .content {
      margin-top: 1rem;
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
